<template>
  <div class="cmt-wrapper">
    <h4 class="cmt-title">评论</h4>
    <el-tag
      type="info"
      v-if="isShowTag"
      closable
      @close="handleClose(tagText)"
      >{{ tagText }}</el-tag
    >
    <!-- 评论发表框 -->
    <div class="cmt-input">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="说点什么吧..."
        v-model="content"
        resize="none"
      >
      </el-input>
    </div>

    <!-- 评论图片跟提交按钮 -->
    <el-row class="cmt-input-ctrls" type="flex" justify="space-between">
      <div class="cmt-pics">
        <el-upload
          ref="removePic"
          action="http://127.0.0.1:1337/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          name="files"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <div>
        <el-button
          class="cmt-submit"
          type="primary"
          size="mini"
          @click="pubComment"
          >提交</el-button
        >
      </div>
    </el-row>

    <!-- 评论内容 -->
    <div class="cmt-list">
      <commentMain
        v-for="(item, index) in dataList"
        :key="index"
        :commentList="item"
        @replyNickname="replyNickname"
      />
    </div>

    <!-- 评论分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="commentSum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="commentSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import commentMain from "../../components/post/comment/commentMain";
export default {
  components: {
    commentMain
  },
  data() {
    return {
      // 是否显示tag
      isShowTag: false,

      // tagText
      tagText: "",
      // 展示图片
      dialogImageUrl: "",
      dialogVisible: false,

      // 图片数组
      pics: [],

      // 评论内容
      content: "",
      // 评论数据列表
      commentList: [],
      // 分页显示第几页
      commentSum: 1,
      // 显示几条数据
      commentSize: 5,
      // 总条数
      total: 0,

      commentInfo: {}
    };
  },
  created() {
    this.getCommentData();
  },
  methods: {
    getCommentData() {
      this.$axios({
        url: "/posts/comments"
      }).then(res => {
        // console.log(res.data);
        this.total = res.data.total;
        this.commentList = res.data.data;
      });
    },
    handlePictureCardPreview(files) {
      this.dialogImageUrl = files.url;
      this.dialogVisible = true;
    },

    // 移除图片
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      console.log(this.pics);

      const picName = file.name;

      const i = this.pics.findIndex(x => x.name === picName);

      console.log(i);
      this.pics.splice(i, 1);

      this.pics.splice(0, fileList.length);
    },

    // 图片上传成功
    handleSuccess(res, files, fileList) {
      this.$nextTick(() => {
        var formData = new FormData();
        formData.append("files", files.raw);

        this.$axios({
          url: "/upload",
          method: "post",
          data: formData
        }).then(res => {
          // console.log(res);
          // console.log(files);
          this.pics.push(res.data[0]);
          // console.log(this.pics);
        });
      });
    },

    // 发表评论
    pubComment() {
      if (this.content === "") {
        return;
      }
      // console.log(this.$route.query);
      this.$axios({
        url: "/comments",
        method: "post",

        headers: {
          // 完整的格式需要 Bearer 前缀
          // Authorization: 'Bearer xxxxxx'
          Authorization: "Bearer" + " " + this.$store.state.user.userInfo.token,

          "Content-Type": "application/json;charset=UTF-8"
        },
        data: {
          content: this.content,
          pics: this.pics,
          post: this.$route.query,
          follow: this.commentInfo.id
        }
      })
        .then(res => {
          this.content = "";
          console.log(this.pics);
          this.$refs.removePic.clearFiles();
          this.handleRemove(this.pics, this.pics);
          this.getCommentData();
          this.handleClose();
        })
        .catch(res => {
          // console.log("123", res);
          this.$message.success("请先登录");
          this.$router.push("/user/login");
        });
    },
    // 更新 显示页数
    handleSizeChange(newSize) {
      this.commentSize = newSize;
    },
    // 更新 显示第几页
    handleCurrentChange(newSum) {
      this.commentSum = newSum;
    },

    // 回复评论
    replyNickname(commentInfo) {
      this.commentInfo = commentInfo;
      this.isShowTag = true;
      this.tagText = "回复 @ " + commentInfo.nickname;
    },
    // 移除tag
    handleClose() {
      this.isShowTag = false;
      this.commentInfo = {};
    }
  },
  computed: {
    dataList() {
      const start = (this.commentSum - 1) * this.commentSize;
      // 列表结束的索引
      let end = start + this.commentSize;
      // console.log(this.commentList.slice(start, end));
      return this.commentList.slice(start, end);
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-wrapper {
  margin-bottom: 20px;

  .cmt-title {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .cmt-input {
    margin-bottom: 10px;
  }

  .cmt-input-ctrls {
    margin-bottom: 30px;

    /deep/ .el-upload--picture-card {
      width: 101px;
      height: 100px;
      line-height: 100px;
    }
  }
}
.cmt-list {
  border: 1px solid #ddd;
}

.el-textarea {
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: 14px;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 102px;
  height: 102px;
}
</style>
